<template>
<!--  <div class="input-div">-->
    <input :style="[pInputStyle]" ref="input"
           :type="type" :value="currentValue" :placeholder="pPlaceholder" :maxlength="pMaxLength" :disabled="pDisabled"
           oninput="value=value.replace(/[^\d]/g,'')"
           :class="[
               {haveValue: currentValue !== ''}, // 是否有值,存在值且不错误
               // {wranValue: wraningValue === true && errorValue === false}, // 警告值,如果当前值不为错,但是警告存在
               // {errValue: errorValue === true}, // 是否为错,错误为true且存在值
           ]"
           @input="handleInput"
           @blur="handleBlur"/>
<!--  </div>-->
</template>
<script>
export default {
  name: 'IInput',
  props: {
    type: { type: String, default: 'text'}, //父组件传来的类型type
    value: { type: String, default: ''}, //父组件传来的值value
    // pTySate: { // 父组件传来的input的状态:0正常、1警告、2错误
    //     type: Number,
    //     default: 9
    // },
      pPlaceholder: {
        type: String,
        default: ''
      },
      pMaxLength: {
        type: Number,
        default: 20
      },
      pDisabled: { // 是否不能输入
        type: Boolean,
        default: false
      },
      /**传来的样式*/
    pInputStyle: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data() {
    return {
      currentValue: this.value, /**当前这个input的真正值*/
      id: this.label,
      // errorValue: false, // 错误标志,默认为错误
      // wraningValue: false, // 警告标志,默认为警告

    }
  },
  computed: {
  },
  watch: {
    value(value) {
      this.currentValue = value //当父组件传来的值发生变化时就改变当前这个input的真正值

    },
    // pTyState: 'judgeType',
  },
  mounted () {
    if (this.$parent.labelFor) this.$refs.input.id = this.$parent.labelFor; //给当前input的id赋值为其父组件的labelFor

  },
  methods: {

    /**处理当前input的函数,
     * 当input的值发生改变进行的处理
     * e即是默认传来的元素Dom结点*/
    handleInput(e) {
      const value = e.target.value; // 获取该元素的值value
      console.log('handleInput:'+value);
      this.currentValue = value;
      this.$emit('input', value);
      this.dispatch('IFormItem', 'form-change', value); // 调用
    },

    /**处理失去焦点的函数*/
    handleBlur() {
      // const value = e.target.value;
      console.log('handleBlur:'+this.currentValue);

        // this.currentValue = value
      this.$emit('mBlur', this.currentValue)
      this.dispatch('IFormItem', 'form-blur', this.currentValue);

    },

    /***
     *
     * 参数1、父组件名
     * 参数2、发送的事件名
     * 参数3、参数
     * @param componentName
     * @param eventName
     * @param params
     */
    dispatch(componentName, eventName, params) { //
      let parent = this.$parent || this.$root; //获取当前组件的父组件,如果没有就获取根组件
      let name = parent.$options.name; // $options的作用,获取data之外定义的属性和方法,这里表示调用name,即本组件的名字
      while (parent && (!name || name !== componentName)) { // 如果有父组件并且(当前组件有名字或者当前组件的名字不等于componentName)
        parent = parent.$parent;
        if (parent) name = parent.$options.name;
      }
      if (parent) parent.$emit.apply(parent, [eventName].concat(params));
    },

    /***
     * 获取当前组件的子组件
     * @param componentName
     * @param eventName
     * @param params
     */
    broadcast(componentName, eventName, params) {
      this.$children.forEach(child => {
        const name = child.$options.name;
        if (name === componentName) child.$emit.apply(child, [eventName].concat(params));
        // else broadcast.apply(child, [componentName, eventName].concat([params]));
        else this.broadcast.apply(child, [componentName, eventName].concat([params]));
      });
    },
      // judgeType () {
      //   if (this.pTySate === 0) this.becomTrueVal() // 如果为0,表示正常
      //   else if (this.pTySate === 1) this.becomWraVal() // 如果为1,表示警告
      //   else if (this.pTySate === 2) this.becomErrVal() // 如果为2,表示错误
      // },
      //
      // becomErrVal() {
      //   this.errorValue = true
      // },
      // becomWraVal() {
      //   this.errorValue = false
      //   this.wraningValue = true
      // },
      // becomTrueVal() {
      //   this.wraningValue = false
      //   this.errorValue = false
      // }

  }
}
</script>

<style scoped>
  input {
    position: absolute;
    height: 32px;
    width: 200px;
    border: none;
    outline: none;
    border-radius: 4px;
    box-sizing: border-box;/*防止加上边线影响布局*/
      /*width: 100%;*/
    /*height: 100%;*/
  }
  input:focus { /*如果选中*/
    /*border: 2px solid rgba(85, 167, 255, 0.6);*/
      box-shadow: 2px 2px 4px rgba(85, 167, 255, 0.6), -2px -2px 4px rgba(85, 167, 255, 0.6);
  }
  .haveValue { /*如果有值*/
    box-shadow: 2px 2px 4px rgba(201, 255, 195, 0.6), -2px -2px 4px rgba(201, 255, 195, 0.6);
  }
  .errValue { /*如果值有误*/
    box-shadow: 2px 2px 4px rgba(255, 1, 0, 0.6), -2px -2px 4px rgba(255, 1, 0, 0.6);
  }
  .wranValue { /*如果警告*/
    box-shadow: 2px 2px 4px rgba(240, 255, 121, 0.6), -2px -2px 4px rgba(240, 255, 121, 0.6);
  }
</style>